<template>
    <div class="message">
        <div class="main">
            <div class="header">
                <el-avatar :size="50" style="margin:15px;float: left;">
                    <img :src="user.avatarUrl" referrerPolicy='no-referrer'>
                </el-avatar>
                <span style="float: left;margin-top: 20px;font-size: 150%;">{{ user.name }}</span>
                <el-link style="float: right;margin-top: 20px;font-size: 120%;margin-right: 20px;" @click="jump_url('/')" :underline="false">返回首页</el-link>
            </div>
            <div class="mymessage">
                <div class="title">
                    <span style="float: left;margin-top: 10px;margin-left: 80px;">我的消息</span>
                    <span style="float: left;margin-top:10px;margin-left:450px;font-weight:600" v-if="chatting_now != null">{{ chatting_now.name }}</span>
                </div>
                <div class="user">
                    <div class="content" v-for="(item,index) in chatting_user" :id="index" @click="Click_on_user_chat(index)">
                        <el-avatar :size="50" style="margin:20px;float: left;">
                            <img :src="item.avatarUrl" referrerPolicy='no-referrer'>
                        </el-avatar>
                        <span style="float: left;margin-top:20px">{{ item.name }}</span>
                        <span class="Pre_output" v-if="item.main.length!=0">{{ item.main[item.main.length-1].message }}</span>
                    </div>
                </div>
                <div class="chatting1">
                    <div class="chatting" ref="scrollDiv">
                        <span style="font-size:80%;margin-left: 320px;color: #909399;">没有更多消息了~</span>
                        <div v-if="Chat!=null" v-for="item in Chat">
                            <div style="margin-top: 20px;">
                                <span style="font-size:80%;margin-left: 300px;color: #909399;">{{ item.createTime }}</span>
                            </div>
                            <div v-if="item.userid!=session_id">
                                <el-avatar :size="30" style="margin:15px;">
                                    <img :src="item.avatarUrl" referrerPolicy='no-referrer'>
                                </el-avatar>
                                <div class="mainmessage">
                                    <span style="background-color: white;float:left;padding: 5px;border-radius: 5px;">{{ item.message }}</span>
                                </div>
                            </div>
                            <div v-if="item.userid==session_id">
                                <div class="mainmessage1">
                                    <span style="background-color: white;float:right;padding: 5px;border-radius: 5px;">{{ item.message }}</span>
                                </div>
                                <el-avatar :size="30" style="margin:15px;">
                                    <img :src="item.avatarUrl" referrerPolicy='no-referrer'>
                                </el-avatar>
                            </div>
                        </div>
                    </div>
                    <div class="input_box">
                        <div>
                            <el-dropdown trigger="click" placement="top-start">
                                <i class="el-icon-picture-outline icon" style="font-size: 150%;"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <div @click="shortcut(input.text)" v-for="input in input_default_data"><el-dropdown-item divided><span>{{ input.text }}</span></el-dropdown-item></div>
                                </el-dropdown-menu>
                            </el-dropdown>
                            
                        </div>
                        <div>
                            <el-input v-model="chat_text" type="textarea" :row="4" :autosize="{ minRows: 4, maxRows: 4}" resize="none" maxlength="100"></el-input>
                        </div>
                        
                        <el-button size="small" style="float: right;" type="primary" @click="Click_to_send_chat_message" :disabled="chat_text.length==0">发送</el-button>
                        <span style="font-size: 80%;color: #909399;float: right;margin-top: 8px;margin-right: 10px;">{{ chat_text.length }}/100</span>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
import input_default from '../static/Default_input_statement.json';
export default {
    data(){
        return{
            input_default_data:input_default.data,//快捷输入语句
            chat_text:'',//聊天输入内容
            chatting_now_index:0,//正在聊天对象在数组的索引值
            user:{//用户个人信息
                // id:0,//id
                // name:'',//用户名
                // avatar_url:'',//头像地址
                // main:[
                //     // {
                //     //     id:2,//聊天id
                //     //     fid:2,//用户聊天对象id
                //     //     message:'hhhhh',
                //     //     time:'2023-07-15 18:15:15',
                //     // },
                //     // {
                //     //     id:3,//聊天id
                //     //     fid:2,//用户聊天对象id
                //     //     message:'hhhhh',
                //     //     time:'2023-07-15 18:15:15',
                //     // },
                // ]
            },
            chatting_user:[//聊天用户
                // {
                //     id:2,//id
                //     name:'周杰伦',//名称
                //     avatar_url:'',//头像
                //     main:[//聊天主体
                //         {
                //             id:1,//聊天id
                //             message:'我是一只天鹅。',//聊天内容
                //             time:'2022-07-04 14:07:05'//聊天时间
                //         },
                //     ],
                // },
            ],
        }
    },
    methods:{
        //参数为url的跳转
        jump_url(url){
            this.$router.push(url)
        },
        //点击发送聊天信息
        Click_to_send_chat_message(){
            var _this= this
            var data = {
                uid:_this.session_id,
                fid:_this.chatting_user[_this.chatting_now_index].id,
                message:_this.chat_text,
            }
            UserChatApi.SubmitChatting(data).then(res=>{
                if(res.data.code == 200){
                    _this.user.main = _this.user.main.concat(res.data.data)
                }
            })
            _this.chat_text = ''
            this.$message({
                message: '发送成功',
                type: 'success'
            });
        },
        //点击快捷输入语句
        shortcut(text){
            this.chat_text = this.chat_text + text
        },
        //点击用户聊天
        Click_on_user_chat(index){
            this.chatting_now_index = index
        }
    },
    computed:{
        //聊天对象的数据
        chatting_now(){
            return this.chatting_user[this.chatting_now_index]
        },
        //聊天内容
        Chat(){
            var _this = this
            var chat = []
            if(_this.user.main == null || _this.chatting_now == null){
                return null;
            }
            _this.user.main.forEach(function(item,index){
                if(item.fid==_this.chatting_now.id){
                    var list = {
                        id:item.id,
                        userid:_this.user.id,
                        avatarUrl:_this.user.avatarUrl,
                        message:item.message,
                        createTime:item.createTime,
                    }
                    chat.push(list)
                }
            })
            _this.chatting_now.main.forEach(function(item,index){
                var list1 = {
                    id:item.id,
                    userid:_this.chatting_now.id,
                    avatarUrl:_this.chatting_now.avatarUrl,
                    message:item.message,
                    createTime:item.createTime,
                }
                chat.push(list1)
            })
            
            return chat.sort((a,b) => a.id-b.id)
        },
        session_id(){
            return sessionStorage.getItem('id')
        }
    },
    created(){
        var _this = this
        var id = sessionStorage.getItem('id')
        if(_this.$route.query.id!=null){
            var list3 = {
                id:_this.$route.query.id,
                name:_this.$route.query.name,
                avatarUrl:_this.$route.query.avatarUrl,
                main:[],
            }
            _this.chatting_user.push(list3)
        }
        //获取个人信息
        UserManagementApi.SubmitUser().then(res=>{
            _this.user = res.data.data
            _this.$set(_this.user,'main',[])
            //获取聊天用户信息
            var chat = {
                uid:_this.user.id
            }
            UserChatApi.SubmitGetChatting(1,10,chat).then(res1=>{
                _this.user.main = res1.data.data.records
            })
        })
        //获取被回复用户信息
        UserChatApi.SubmitGetFidChatting(id).then(res=>{
            if(res.data.data != null){
                _this.chatting_user = _this.chatting_user.concat(res.data.data)
            }
        })
        UserChatApi.SubmitOneDonot()
    }
};
</script>

<style scoped>
@import "../assets/css/body.css";
.message{
    height: 100%;
    width: 100%;
    background-image: url('../assets/image/消息背景图.png');
    background-size: cover;
    background-repeat: no-repeat;
}
.main{
    display: inline-block;
    height: 600px;
    width: 1000px;
    background-color: white;
    margin-left: 340px;
    margin-top: 60px;
}
.header{
    width: 100%;
    height: 80px;
    background-color: aliceblue;
}
.mymessage{
    width: 100%;
    height: 500px;
    margin-top: 20px;
}
.title{
    width: 100%;
    height: 40px;
    background-color: aliceblue;
}
.user{
    display: inline-block;
    height: 460px;
    width: 250px;
    background-color: whitesmoke;
    overflow: scroll;
}
.chatting{
    display: inline-block;
    height: 300px;
    width: 750px;
    background-color: #EBEEF5;
    vertical-align: top;
    overflow: scroll;
}
.chatting1{
    display: inline-block;
    height: 300px;
    width: 750px;
    background-color: #EBEEF5;
    vertical-align: top;
}
.input_box{
    display: inline-block;
    height: 140px;
    width: 730px;
    padding: 10px;
    background-color: #EBEEF5;
}
.content{
    width: 100%;
    height: 100px;
    background-color: whitesmoke;
}
.content:hover{
    background-color: #E4E7ED;
    cursor: pointer;
}
.Pre_output{
    font-size: 90%;
    color: #606266;
    float:left;
    width:120px;
    height:20px;
    margin-top:10px;
    margin-right:20px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}
.mainmessage{
    display: inline-block;
    width: 500px;
    vertical-align: top;
    margin-top: 17px;
}
.mainmessage1{
    display: inline-block;
    width: 500px;
    vertical-align: top;
    margin-top: 17px;
    margin-left: 170px;
}
div /deep/ .el-textarea__inner{
    background-color: #EBEEF5;
    border: 0px solid #DCDFE6;
    padding: 2px;
}
.icon{
    cursor: pointer;
}
.icon:hover{
    color: #409EFF;
}
</style>